<template>
    <div ref="chart"></div>
</template>
<script>

import echarts from '@/lib/echarts'
import { getElementSize } from '@/lib/util'
export default {
    name: 'Pie1Chart',
    props: {
         data: {type: Array, default: () => {return []}},
        unit: {type: String, default: ''},
        title: {type: String, default: ''},
        name: {type: String, default: ''},
        position: {type: String, default: 'right'} //饼图位置
    },
    data() {
        return {
            chart: null, //echart图表对象
            dataset: [],
            sum: 0,
        }
    },
     watch: {
        '$store.state.windowResizeState' () { //监听浏览器窗口变化
            this.reDraw()
        },
    },
    mounted() {
        const that = this
        that.init()
    },
    methods: {
        init () {   //实例化图表
            const that = this
            if(!that.chart) {
                that.chart = echarts.init(that.$refs.chart,false)
            }
           
            const option = {
    color: ['#f0ca61', '#2F8DF4','#24f1c9'],
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        right: 10,
        top: 10,
        textStyle:{
             color: '#ddd'
        }
    },
    series: [{
        type: 'pie',
        roseType: 'radius',
        radius: ['40%', '60%'],
        animationDuration:3000,
        data: that.data,
        label: {
            normal: {
               show:'none'
            },
        },
        labelLine: {
            lineStyle: {
                color: '#ddd'
            }
        },
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
            }
        }
    }]
};
            that.chart.setOption(option, true)
        },
         reDraw () { //重绘图表
            const that = this
            if(that.chart) {
                that.chart.resize()
            }else {
                that.init()
            }
        },
    },
    beforeDestroy () {
        const that = this
        if(that.chart){
            that.chart.dispose()
            that.chart = null
        }
    }
}
</script>